<template>
  <div :style="parentStyle" :class="['top_btns_root_css', { 'is-logo-right': logoRight, 'is-logo-left': logoLeft }]">
    <img-text-btn-view
      :icon-left="true"
      text="隐私政策"
      :focusable="true"
      style="width: 200px;height: 60px;margin-left: 10px;margin-right: 10px;"
      :textStyle="{ width: '120px', height: '60px', color: '#BFBFBF', focusColor: '#0E0E0E' }"
      name="top_privacy"
      ref="top_privacy"
      :icon="ic_privacy_agreement"
      :focus-icon="ic_privacy_agreement_focus"
      @click="onClick"
      @focus="onFocus"/>
    <img-text-btn-view
      v-if="!$slots.btnItem"
      :icon-left="true"
      text="个人中心"
      sid="topMineBtnSid"
      :focusable="true"
      style="width: 200px;height: 60px;margin-left: 10px;margin-right: 10px;"
      :textStyle="{ width: '120px', height: '60px', color: '#BFBFBF', focusColor: '#0E0E0E' }"
      name="top_my_btn"
      ref="top_my_btn"
      :icon="ic_header_login_normal"
      :focus-icon="ic_header_login_focused"
      @click="onClick"
      @focus="onFocus"/>
    <slot name="btnItem"></slot>
    <div class="find_header_right">
      <img-text-btn-view
        v-if="false"
        :icon-left="true"
        text="设置"
        :focusable="true"
        style="width: 200px;height: 60px;margin-left: 10px;margin-right: 10px;"
        :textStyle="{ width: '120px', height: '60px', color: '#BFBFBF', focusColor: '#0E0E0E' }"
        name="top_setting"
        ref="top_setting"
        :icon="ic_setting_normal"
        :focus-icon="ic_setting_focus"
        @click="onClick"
        @focus="onFocus"/>
      <span style="margin-right: 21px;font-size: 20px;line-height:30px;color: rgba(255,255,255,0.5);" v-if="filingNumber.length>3&&filingNumber">{{filingNumber}}</span>
      <img v-if="!$slots.logoItem"
           :style="{width: '106px',height: '60px'}" :src="logo">
      <slot name="logoItem"></slot>
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent } from "@vue/runtime-core";
import ImgTextBtnView from "./img-text-btn-view.vue";
import { useESRouter } from "@extscreen/es3-router";
import ic_privacy_agreement from "../assets/ic_privacy_agreement.png"
import ic_privacy_agreement_focus from "../assets/ic_privacy_agreement_focus.png"
import ic_header_login_normal from "../assets/ic_header_login_normal.png"
import ic_header_login_focused from "../assets/ic_header_login_focused.png"
import ic_setting_normal from "../assets/ic_setting_normal.png"
import ic_setting_focus from "../assets/ic_setting_focus.png"
import {__CONFIG__} from "../views/config/global";
import logo from "../assets/logo.png"
export default defineComponent({
  name: "top-btns-view",
  components: { 'img-text-btn-view': ImgTextBtnView },
  props: {
    parentStyle: Object,
    logoStyle: Object,
    logoLeft: Boolean,
    logoRight: Boolean,
    downSid:{
      type:String,
      default:""
    }
  },
  emits: ['focus', 'click'],
  setup(props, context) {
    const router = useESRouter()
    const filingNumber = __CONFIG__.regNumber + "\n" + __CONFIG__.IndRegNumber
    function onClick(e): void {
      const name = e.target.attributes.name
      context.emit("click")
      switch (name) {
        case "top_search_btn":
          router.push({
            name: 'search',
            params: {}
          });
          break;
        case "top_my_btn":
          router.push({
            name: 'my',
            params: {}
          });
          break;
        case "top_privacy":
          let agreementUrl = __CONFIG__.agreeUrl
          router.push({
            name: 'load_web_view',
            params:{
              html:agreementUrl + __CONFIG__.packageName+"&default=privacy_agreement"
            }
          })
          break;
        case 'top_setting':
          router.push({
            name: 'setting_view',
            params:{

            }
          })
          break;
      }
    }
    function onFocus(e): void {
      const name = e.target.attributes.name
      switch (name) {
        case "top_screen_btn":
          context.emit("focus", e)
          break;
        case "top_search_btn":
          context.emit("focus", e)
          break;
        case "top_history_btn":
          context.emit("focus", e)
          break
      }

    }
    return {
      onClick,
      onFocus,
      ic_privacy_agreement,
      ic_privacy_agreement_focus,
      ic_header_login_normal,
      ic_header_login_focused,
      logo,
      filingNumber,
      ic_setting_normal,
      ic_setting_focus
    }
  }
})
</script>

<style>
.top_btns_root_css {
  position: absolute;
  width: 1920px;
  height: 120px;
  background-color: transparent;
  display: flex;
  justify-content: start;
  align-items: center;
  z-index: 500;
}

.is-logo-right {
  flex-direction: row;
  padding-left: 80px;
}

.is-logo-left {
  flex-direction: row-reverse;
  padding-right: 80px;
}

.find_header_right {
  position: absolute;
  right: 0;
  padding-right: 90px;
  height: 120px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
